import React from 'react';

function Icon(props: { name: string; className?: string; style?: any }) {
  // return <i x-class={['iconfont', `icon-${props.name}`]} />;
  return (
    <svg className="icon svg-icon" x-class={props.className} style={props.style} aria-hidden="true">
      <use xlinkHref={`#icon-${props.name}`} />
    </svg>
  );
}

function Png(props: { name: string }) {
  return (
    <div className="h-full inline-flex items-center">
      {/* eslint-disable-next-line @typescript-eslint/no-require-imports */}
      <img src={require(`../../assets/images/${props.name}.png`)} />
    </div>
  );
}

function Image(props: { name: string }) {
  // eslint-disable-next-line @typescript-eslint/no-require-imports
  return <img src={require(`../../assets/images/${props.name}.png`)} />;
}

Icon.Png = Png;
Icon.Image = Image;

export default Icon;
